<template>
  <div class="wrap-left-bottom">
    <div :style="{ width: '100%', height: '100%' }">
      <LakerEcharts ref="omoCoalinoutRef" :option="dataOption" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import LakerEcharts from '@/components/lakerEcharts/index.vue'
import isepApi from '@/api/isep'

export default {
  name: 'IsepOmoCoalinout',
  components: { LakerEcharts },
  data() {
    return {
      dialogTableVisible: false,
      ticketSta: 0,
      dialogTitle: '工作票信息',
      totalNum: 0,
      dataOption: {
        backgroundColor: '',
        tooltip: {
          formatter: '{a}'
        },
        series: [
          // left
          {
            name: 'gauge 0',
            type: 'gauge',
            min: 0,
            max: 1,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 1,
            radius: '70%',
            center: ['24%', '45%'],
            axisLine: {
              lineStyle: {
                color: [[1, '#AE96A6']]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            anchor: {},
            pointer: {
              show: false
            },
            detail: {
              show: false
            },
            title: {
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              offsetCenter: [0, '120%']
            },
            progress: {
              show: true,
              width: 3,
              itemStyle: {
                color: '#D9001B'
              }
            },
            data: [
              {
                value: 100,
                name: '机组负荷（MW）'
              }
            ]
          },
          {
            name: '230MW',
            type: 'gauge',
            min: 0,
            max: 600,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['24%', '45%'],
            axisLine: {
              lineStyle: {
                color: [[1, '#AE96A6']]
              }
            },
            splitLine: {
              distance: -7,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            axisTick: {
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              distance: 14,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff'
            },
            anchor: {},
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#FFFF00',
                shadowColor: 'rgba(0, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 800,
              fontFamily: 'Arial',
              offsetCenter: [0, 0]
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 230
              }
            ]
          },
          {
            name: '330MW',
            type: 'gauge',
            min: 0,
            max: 600,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['24%', '45%'],
            axisLine: {
              lineStyle: {
                color: [[1, '#AE96A6']]
              }
            },
            splitLine: {
              distance: -7,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisTick: {
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              distance: 14,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff'
            },
            anchor: {},
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#F59A23',
                shadowColor: 'rgba(255, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 800,
              fontFamily: 'Arial',
              offsetCenter: [0, 0]
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 330
              }
            ]
          },
          {
            name: '470MW',
            type: 'gauge',
            min: 0,
            max: 600,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['24%', '45%'],
            axisLine: {
              lineStyle: {
                color: [[1, '#AE96A6']]
              }
            },
            splitLine: {
              distance: -7,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisTick: {
              distance: -8,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              distance: 14,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff'
            },
            anchor: {},
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#D9001B',
                shadowColor: 'rgba(155, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {
              color: '#fff',
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              offsetCenter: [0, 0]
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 470
              }
            ]
          },

          // right
          {
            name: 'gauge 20',
            type: 'gauge',
            min: 0,
            max: 8,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['72%', '45%'],
            axisLine: {
              lineStyle: {
                color: [[1, '#AE96A6']]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            anchor: {},
            pointer: {
              show: false
            },
            title: {
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              offsetCenter: [0, '120%']
            },
            detail: {
              show: false
            },
            progress: {
              show: true,
              width: 3,
              itemStyle: {
                color: '#F59A23'
              }
            },
            data: [
              {
                value: 250,
                name: '供热能力（万吉焦）'
              }
            ]
          },
          {
            name: '5万吉焦',
            type: 'gauge',
            min: 0,
            max: 10,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['72%', '45%'],
            axisLine: {
              lineStyle: {
                width: 9,
                color: [
                  [0, '#f00'],
                  [10, 'rgba(255, 0, 0, 0)']
                ]
              }
            },
            splitLine: {
              distance: -5,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisTick: {
              distance: -14,
              length: 5,
              lineStyle: {
                color: '#000',
                width: 2
              }
            },
            axisLabel: {
              distance: 12,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              formatter: function (value) {
                return value + ''
              }
            },
            progress: {
              show: false,
              width: 5,
              itemStyle: {
                color: '#fff'
              }
            },
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#FFFF00',
                shadowColor: 'rgba(155, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {},
            detail: {
              show: false
            },
            data: [
              {
                value: 5,
                name: ''
              }
            ]
          },
          {
            name: '7万吉焦',
            type: 'gauge',
            min: 0,
            max: 10,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['72%', '45%'],
            axisLine: {
              lineStyle: {
                width: 9,
                color: [
                  [0, '#f00'],
                  [10, 'rgba(255, 0, 0, 0)']
                ]
              }
            },
            splitLine: {
              distance: -5,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisTick: {
              distance: -14,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              distance: 12,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              formatter: function (value) {
                return value + ''
              }
            },
            progress: {
              show: false
            },
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#F59A23',
                shadowColor: 'rgba(155, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {},
            detail: {
              show: false
            },
            data: [
              {
                value: 7,
                name: ''
              }
            ]
          },
          {
            name: '8.2万吉焦',
            type: 'gauge',
            min: 0,
            max: 10,
            startAngle: 225,
            endAngle: -45,
            splitNumber: 5,
            radius: '70%',
            center: ['72%', '45%'],
            axisLine: {
              lineStyle: {
                width: 9,
                color: [
                  [0, '#f00'],
                  [10, 'rgba(255, 0, 0, 0)']
                ]
              }
            },
            splitLine: {
              distance: -5,
              length: 10,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisTick: {
              distance: -14,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              distance: 12,
              fontSize: 10,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              formatter: function (value) {
                return value + ''
              }
            },
            progress: {
              show: false,
              width: 5,
              itemStyle: {
                color: '#fff'
              }
            },
            pointer: {
              icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
              width: 5,
              length: '90%',
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#D9001B',
                shadowColor: 'rgba(155, 0, 0)',
                shadowBlur: 5,
                shadowOffsetY: 2
              }
            },
            title: {},
            detail: {
              show: false
            },
            data: [
              {
                value: 8.2,
                name: ''
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    openTicketList(param) {
      this.ticketSta = param.name
      this.dialogTableVisible = true
    },
    initLoadData() {
      isepApi.getCoalinoutLastData().then((res) => {
        if (res.code === 200) {
          let serdata = []
          let serTitle = []
          let total = 0
          for (let i = 0; i < res.data.length; i++) {
            serTitle.push(res.data[i]['varName'])
            serdata.push(res.data[i]['inVal'])
            total = total + parseFloat(res.data[i]['inVal'])
          }
          this.totalNum = total
          this.dataOption = {
            xAxis: [{ data: serTitle }],
            series: [
              {
                data: serdata
              }
            ]
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap-left-bottom {
  padding: 10px 10px;
  width: 100%;
  height: 100%;

  .moudle-title {
    color: #50e9ff;
    font-size: 16px;
    text-align: center;
  }

  #myChart-left-bottom {
    margin: 0 auto;
  }
}
</style>
